<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HouseFinder</title>
	<script type="text/javascript">
		function validateNumber(value) {
			// Validate the number
			if(! isNumber(value))
				alert("Please enter a number.");
		}

		function validateZIPCode(value) {
			// Validate the ZIP code
			if(! isZIPCode(value))
				alert("Please enter a ZIP code in the form xxxxx.");
		}

		function calcPrice() {
			var maxPrice = document.getElementById('income').value * 4;
			alert("You can afford a house that costs up to（你能负担得起一栋房子的成本） $ " + maxPrice + ".");
		}

		function findHouses(form) {
                               var bedrooms = document.getElementById("bedrooms").value;
                               var zipCode = document.getElementById("zip").value;
                               // Display a list of matching houses from the server
                               form.submit();
		}
	</script>
</head>
<body>
	<div id="frame">
		<div id="header">Ready to find a new house? 准备找一个新房子吗？</div>
		<div id="left">
			<!-- <img src="house.png" alt="house"> -->
		</div>
		<form name="orderform" action="..." method="POST">
			<div class="field">Enter your annual income:<input type="text" id="income" size="12" onblur="validateNumber(this.value)" placeholder="输入您的年收入" /></div>
			<div class="field">Enter the number of bedrooms:<input type="text" id="bedrooms" size="6" onblur="validateNumber(this.value)" placeholder="卧室数量" /></div>
			<div class="field">Enter your ZIP code:<input type="text" id="zip" size="10" onblur="validateZIPCode(this.value)" placeholder="请输入您的邮编" /></div>
			<input type="button" value="Calculate Price 计算价格" onclick="calcPrice()">
			<input type="button" value="Shop for Houses 购买房子" onclick="findHouses(this.form)">
		</form>
	</div>
</body>
</html>